<template>
    <div>
        <el-collapse-item title="- 文字信息" :name="props.id">
            <ul class="editorformTable" border="1" bordercolor="#ffffff" cellspacing="0" cellpadding="0">
                <li class="editorformItem">
                    <div class="editorformItemName">文字内容</div>
                    <div class="editorformItemFunc">
                        <el-input v-model="materialOptions.text" @input="change('text', materialOptions.text)" class="editorforminput" placeholder="请输入文字内容" />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">字体</div>
                    <div class="editorformItemFunc">
                        <el-select v-model="materialOptions.font_family" class="editorforminput" @change="change('font_family', materialOptions.font_family)">
                            <el-option v-for="opt in fontFamily" :key="opt.value" :label="opt.label" :value="opt.value" />
                        </el-select>
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">字体大小</div>
                    <div class="editorformItemFunc">
                        <el-input-number v-model="materialOptions.font_size" @input="change('font_size', materialOptions.font_size)" class="editorforminput" :step="1" conliols-position="right" :min="10" />
                    </div>
                </li>
                <li class="editorformItem" v-if="props.graphic.options.plottingType == 'marqueeText'">
                    <div class="editorformItemName">滚动速度</div>
                    <div class="editorformItemFunc">
                        <el-input-number v-model="materialOptions.speed" @input="change('speed', materialOptions.speed)" class="editorforminput" :step="1" conliols-position="right" :min="0" />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">是否加粗</div>
                    <div class="editorformItemFunc">
                        <el-switch v-model="materialOptions.font_weight" @change="change('font_weight', materialOptions.font_weight)" active-value="bold" inactive-value="normal" style="--el-switch-on-color: rgba(32, 160, 255)" />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">是否斜体</div>
                    <div class="editorformItemFunc">
                        <el-switch v-model="materialOptions.font_style" @change="change('font_style', materialOptions.font_style)" active-value="italic" inactive-value="normal" style="--el-switch-on-color: rgba(32, 160, 255)" />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">颜色</div>
                    <div class="editorformItemFunc">
                        <el-color-picker :predefine="defaultColor" @change="change('color', materialOptions.color)" show-alpha class="editorforminput" v-model="materialOptions.color" />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">是否衬色</div>
                    <div class="editorformItemFunc">
                        <el-switch v-model="materialOptions.stroke" @change="change('stroke', materialOptions.stroke)" style="--el-switch-on-color: rgba(32, 160, 255)" />
                    </div>
                </li>
                <li class="editorformItem" v-if="materialOptions.stroke">
                    <div class="editorformItemName">衬色颜色</div>
                    <div class="editorformItemFunc">
                        <el-color-picker :predefine="defaultColor" @change="change('strokeColor', materialOptions.strokeColor)" show-alpha class="editorforminput" v-model="materialOptions.strokeColor" />
                    </div>
                </li>
                <li class="editorformItem">
                    <div class="editorformItemName">是否背景</div>
                    <div class="editorformItemFunc">
                        <el-switch v-model="materialOptions.background" @change="change('background', materialOptions.background)" style="--el-switch-on-color: rgba(32, 160, 255)" />
                    </div>
                </li>
                <li class="editorformItem" v-if="materialOptions.background">
                    <div class="editorformItemName">背景颜色</div>
                    <div class="editorformItemFunc">
                        <el-color-picker :predefine="defaultColor" @change="change('backgroundColor', materialOptions.backgroundColor)" show-alpha class="editorforminput" v-model="materialOptions.backgroundColor" />
                    </div>
                </li>
                <li class="editorformItem" v-if="materialOptions.background">
                    <div class="editorformItemName">背景内边距</div>
                    <div class="editorformItemFunc">
                        <el-input-number v-model="materialOptions.backgroundPadding" @input="change('backgroundPadding', materialOptions.backgroundPadding)" class="editorforminput" :step="1" conliols-position="right" :min="0" />
                    </div>
                </li>
                <border :graphic="props.graphic"></border>
            </ul>
        </el-collapse-item>
    </div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import border from "./fillmaterial/border.vue";
import { defaultColor } from "@/config/config";
interface Props {
    id?: any; // 默认值
    graphic?: any;
    texture?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
    graphic: {},
    texture: false,
    id: "",
});
const materialOptions: any = reactive(props.graphic.style.materialOptions);
const change = (opt: string, val: any) => {
    setTimeout(() => {
        switch (opt) {
            case "text":
                props.graphic.setStyle({ materialOptions: { text: val } });
                break;
            case "font_family":
                props.graphic.setStyle({ materialOptions: { font_family: val } });
                break;
            case "font_size":
                props.graphic.setStyle({ materialOptions: { font_size: val } });
                break;
            case "speed":
                props.graphic.setStyle({ materialOptions: { speed: val } });
                break;
            case "font_weight":
                props.graphic.setStyle({ materialOptions: { font_weight: val } });
                break;
            case "font_style":
                props.graphic.setStyle({ materialOptions: { font_style: val } });
                break;
            case "color":
                props.graphic.setStyle({ materialOptions: { color: val } });
                break;
            case "stroke":
                props.graphic.setStyle({ materialOptions: { stroke: val } });
                break;
            case "strokeColor":
                props.graphic.setStyle({ materialOptions: { strokeColor: val } });
                break;
            case "background":
                props.graphic.setStyle({ materialOptions: { background: val } });
                break;
            case "backgroundColor":
                props.graphic.setStyle({ materialOptions: { backgroundColor: val } });
                break;
            case "backgroundPadding":
                props.graphic.setStyle({ materialOptions: { backgroundPadding: val } });
                break;
            default:
                props.graphic.setStyle({ materialOptions: materialOptions });
        }
    }, 100);
};
const fontFamily: any = reactive([
    {
        label: "宋体",
        value: "宋体",
    },
    {
        label: "微软雅黑",
        value: "微软雅黑",
    },
    {
        label: "楷体",
        value: "楷体",
    },
    {
        label: "隶书",
        value: "隶书",
    },
    {
        label: "黑体",
        value: "黑体",
    },
]);
</script>
